/* votePage/pages/list/list.wxss */
@function px($col) {
  @return $col / 1.44 + rpx;
}

.works-list{
  background-color: #f6f6f6;
  padding-top: px(642);
  padding-bottom: px(157);
  box-sizing: border-box;
  min-height: 100vh;
}
.content-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.head-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: #f6f6f6;
  .headImg {
    width: 100%;
    height: 306.25rpx;
    position: relative;
    z-index: 9999999999;
  }
  .filterBox {
    height: px(160);
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items:center;
    .title {
      width: 100rpx;
      font-weight: bold;
    }
    .filterIcon {
      width: 16rpx;
      height: 26rpx;
      position: relative;
      top:2px;
    }
    
    .searchBox {
      background-color: #fff;
      display: flex;
      border-radius: px(32);
      overflow: hidden;
      height: px(110);
      align-items: center;
      padding-left: 35rpx;
      box-sizing: border-box;
      width: 451rpx;
      .searchBtn {
        background-color: #fff;
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        width: px(150);
        height: px(110);
      }
      .searchIcon {
        width: px(50);
        height: px(50);
       
      }
   
    }
 }
}

.works-content{
  padding: 0 35rpx;
  .item {
    display: flex;
    margin-bottom: 32rpx;
    .num {
      width: px(100);
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        position: relative;
        left:- px(20);
      }
      .jiangIcon {
        width: px(59);
        height: px(78);
        position: relative;
        left:- px(20);
      }
    }
    .box {
      flex:1;
      padding: px(48);
      display: flex;
      background-color: #fff;
      border-radius: px(42);
      position: relative;
      .imgBox {
        width: px(251);
        height: px(320);
        // background-color:pink;
        flex: none;
        margin-right: 30rpx;
        border-radius: 16rpx;
        box-shadow: 2px 3px 4px rgba(0,0,0,0.08);
        overflow: hidden;
        .img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .info {
        padding-top: 12rpx;
        .title {
          font-weight: bold;
          font-size: 36rpx;
          overflow: hidden; /* 确保溢出的内容会被隐藏 */
          white-space: nowrap; /* 确保文本在一行内显示，不换行 */
          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          width: 340rpx;
        }
         .n-title {
          font-size: 24rpx;
          height: 108rpx;
          color: #5e5e5e;
          overflow: hidden;
         }
         .tp_num {
           font-size: 24rpx;
           color:#5e5e5e;
         }
      }
      .num_ {
        position: absolute;
        right: 20rpx;
        top: 14rpx;
        font-size: 24rpx;
        color: #1b1616;
      }
     
    }
    .box2 {
      .num_ {
        position: absolute;
        right: 20rpx;
        top: 14rpx;
        font-size: 24rpx;
        color: #1b1616;
      }
      flex:1;
      padding: px(48);
      display: flex;
      background-color: #fff;
      border-radius: px(42);
      position: relative;
      .title {
        font-weight: bold;
        font-size: 36rpx;
        overflow: hidden; /* 确保溢出的内容会被隐藏 */
        white-space: nowrap; /* 确保文本在一行内显示，不换行 */
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        width: 462rpx;
        height: 100rpx;
      }

      .imgBox {
        width: px(200);
        height: px(200);
        // background-color:pink;
        margin-right: 30rpx;
        border-radius: 16rpx;
        overflow: hidden;
        .img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .tp_num {
        font-size: 26rpx;
        color:#5e5e5e;
      }
    }
    .btn_tp {
      width: 160rpx;
       height: 62rpx;
       border-radius: 12rpx;
       background-color: #e23d7e;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #fff;
       position: absolute;
       bottom: 23rpx;
       right: 17rpx;
       font-size: 26rpx;
     }
  }
}
.red {
  color:#cf4f5e;
}
.bottom {
  position: fixed;
  left:0;
  right: 0;
  bottom:0;
  height: px(159);
  background-color: #fff;
  color:#919191;
  font-size: px(42);
  .over {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .have {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}